<template>
  <!--图片轮播组件-->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in imgList"><img :src="item | imgPathFilter" alt="" width="100%" height="165px" style="object-fit:cover"></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Swiper from 'swiper';
  export default {
    name: '',
    props: {
      imgList: {type: Array}
    },
    data() {
      return {};
    },
    methods: {},
    created() {
    },
    mounted(){

    },
    updated(){
      new Swiper('.swiper-container', {
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction',
        },
        autoplay: true,
      })
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .swiper-pagination-fraction {
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 25px;
    left: 80%;
    border-radius: 5px;
    color: #fff;
    width: 50px;
  }
</style>
